<template>
  <div class="container">
    <div class="search">
      <el-form ref="form" :model="info" label-width="80px" :inline="true">
        <el-form-item label="关键字">
          <el-input v-model="info.keyword" placeholder="根据文章标题搜索"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="info.state" placeholder="请选择">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="clear">清除</el-button>
          <el-button size="small" type="primary" @click="searchKeyword">搜索</el-button>
        </el-form-item>
      </el-form>

      <el-button class="rbtn" type="success" icon="el-icon-edit" size="small" @click="dialogVisible = true">新增技巧</el-button>
    </div>
    <el-alert class="tips" :title="aleatText" type="info" show-icon :closable="false"></el-alert>

    <!-- 数据列表 -->
    <el-table :data="articleList" style="width: 100%">
      <el-table-column type="index" label="序号" width="180"></el-table-column>
      <el-table-column prop="title" label="文章标题" width="180">
        <template slot-scope="scope">
          {{ scope.row.title }}
          <a @click.prevent="openvideo(scope.row.videoURL)" v-if="scope.row.videoURL" href="#"> <i class="el-icon-video-play" style="color: blue" /></a>
        </template>
      </el-table-column>
      <el-table-column prop="visits" label="阅读数"></el-table-column>
      <el-table-column prop="username" label="录入人"></el-table-column>
      <el-table-column label="录入时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime | parseTimeByString }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <div>{{ scope.row.state === 1 ? '已启用' : '已禁用' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="preview(scope.row.id)">预览</el-button>
          <el-button type="text" size="mini" @click="repatriation(scope.row)">{{ scope.row.state === 1 ? '禁用' : '启用' }}</el-button>
          <el-button type="text" size="mini" @click="modiFication(scope.row.id)" :disabled="scope.row.state === 1">修改</el-button>
          <el-button type="text" size="mini" @click="deleteId(scope.row)" :disabled="scope.row.state === 1">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-size="info.pagesize"
      :current-page="info.page"
      layout="prev, pager, sizes, next, jumper"
      :page-sizes="[5, 10, 20, 50]"
      :total="info.pages"
      align-center="right"
      background
    ></el-pagination>

    <!-- 新增技巧弹出框 -->
    <el-dialog title="新增文章" :visible.sync="dialogVisible" @close="handle">
      <el-form :model="titleForm" :rules="titleFormrules" ref="titleRef" label-width="100px">
        <el-form-item label="文章标题" prop="title">
          <el-input class="el-ipt" v-model="titleForm.title" placeholder="请输入文章标签"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody">
          <quill-editor v-model="titleForm.articleBody" :content="content" :options="editorOption" />
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL" style="margin-top: 20px !important">
          <el-input class="el-ipt" v-model="titleForm.videoURL" placeholder="请输入视频地址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addArticle">确 定</el-button>
      </span>
    </el-dialog>
    <!-- /新增技巧弹出框 -->

    <!-- 预览弹出框 -->
    <el-dialog title="预览文章" :visible.sync="previewFormVisible">
      <h3>{{ articleInfo.title }}</h3>
      <div>
        <span>{{ articleInfo.createTime | parseTimeByString }}</span>
        <span class="username">超级管理员</span>
        <span style="margin-right: 7px"><i class="el-icon-view"></i></span>
        <span>{{ articleInfo.state }}</span>
        <div class="previewDiv" v-html="articleInfo.articleBody"></div>
      </div>
    </el-dialog>
    <!-- /预览弹出框 -->

    <!-- 修改弹出框 -->
    <el-dialog title="提示" :visible.sync="modificationVisible" width="50%">
      <el-form :model="articleAdd" :rules="titleFormrules" ref="titleRef" label-width="100px">
        <el-form-item label="文章标题" prop="title">
          <el-input class="el-ipt" v-model="articleAdd.title" placeholder="请输入文章标签"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="articleBody" style="height: 235px">
          <quill-editor :content="content" v-model="articleAdd.articleBody" :options="editorOption" />
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input class="el-ipt" v-model="articleAdd.videoURL" placeholder="请输入视频地址"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modificationVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyArticle">确 定</el-button>
      </span>
    </el-dialog>
    <!-- /修改弹出框 -->

    <!-- 视频播放 -->
    <div class="videoDiv" v-if="videoURL">
      <div class="closed" @click="closed"><i class="el-icon-error closed-i-x" /></div>
      <div class="box"><video ref="video" :src="videoURL"></video></div>
    </div>
    <!-- 视频播放 -->
  </div>
</template>
<script>
import { list, remove, detail, changeState, add, update } from '@/api/hmmm/articles.js'
// import { parseTimeByString } from '@/filters/index.js'
import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'Container',
  components: {
    quillEditor,
  },
  // filters: { parseTimeByString },

  props: {},
  data() {
    const checkUrl = (rule, value, cb) => {
      const regUrl = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
      if (regUrl.test(value)) {
        return cb()
      }
      cb(new Error('请输入正确的url地址'))
    }
    return {
      options: [
        {
          value: 'qiyong',
          label: '启用',
        },
        {
          value: 'jinyong',
          label: '禁用',
        },
      ],
      articleList: [],
      articleInfo: [],
      articleId: null,
      info: {
        page: 1, // 页码值
        pagesize: 10, // 一页有几个
        pages: 1,
        keyword: null, // 关键字
        state: null, // 状态
      },
      dialogVisible: false, // 控制新增技巧
      guanjianzi: '',
      titleForm: {
        title: '',
        videoURL: '',
        articleBody: '',
      },
      titleFormrules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入文章内容', trigger: 'blur' }],
        videoURL: [{ validator: checkUrl, message: '请输入正确的URL地址', trigger: 'blur' }],
      },
      previewFormVisible: false, // 控制预览
      modificationVisible: false, // 控制修改
      content: '',
      editorOption: {
        modules: {
          toolbar: [['bold', 'italic', 'underline', 'strike', 'image', { list: 'ordered' }, { list: 'bullet' }, 'blockquote', 'code-block']],
        },
      },
      articleAdd: {},
      aleatText: '',
      videoURL: null,
    }
  },
  computend: {},
  watch: {},
  created() {
    this.getArticleList()
  },
  mounted() {},
  methods: {
    // 获取所有数据
    async getArticleList() {
      try {
        const { data } = await list(this.info)
        // console.log(data)
        this.articleList = data.items
        this.aleatText = `共${data.counts}条数据`
        this.info.pages = data.counts
        // console.log(this.articleList);
      } catch (err) {
        this.$message.error('获取数据失败')
      }
    },
    handleSizeChange(Size) {
      this.info.pagesize = Size
      this.getArticleList()
    },
    handleCurrentChange(newPage) {
      this.info.page = newPage
      this.getArticleList()
    },
    // 删除
    async deleteId(id) {
      try {
        const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).catch((err) => err)
        if (confirmResult !== 'confirm') {
          return this.$message.info('已取消删除')
        }

        await remove(id)
        this.getArticleList()
        this.$message.success('删除成功')
      } catch (err) {
        this.$message.error('删除失败，请重试')
      }
    },

    // 预览
    async preview(id) {
      this.previewFormVisible = true
      try {
        const { data } = await detail({ id })
        // console.log(data);
        this.articleInfo = data
      } catch (err) {
        this.$message.error('预览失败,请重试')
      }
    },
    // 启用禁用
    async repatriation(data) {
      try {
        await changeState({
          id: data.id,
          state: data.state === 0 ? 1 : 0,
        })
        data.state = data.state === 0 ? 1 : 0
        this.$message.success('切换成功')
      } catch (err) {
        this.$message.error('失败')
      }
      this.getArticleList()
    },
    // 拿到修改的Id
    async modiFication(id) {
      this.articleId = id
      this.modificationVisible = true // 显示弹窗
      const { data } = await detail({ id })
      // console.log(data)
      this.articleAdd = data
    },
    // 搜索
    searchKeyword() {
      this.articleList
      this.getArticleList()
    },
    // 清除
    clear() {
      this.info.keyword = null
      this.info.state = null
      this.getArticleList()
    },
    // 新增技巧
    async addArticle() {
      try {
        await add({
          title: this.titleForm.title,
          articleBody: this.titleForm.articleBody,
          videoURL: this.titleForm.videoURL,
        })
        this.getArticleList()
        // 关闭弹框
        this.dialogVisible = false
        this.$message.success('添加成功')
      } catch (err) {
        this.$message.error('添加失败')
      }
    },
    // 修改
    async modifyArticle() {
      try {
        await update({
          id: this.articleId,
          title: this.articleAdd.title,
          articleBody: this.articleAdd.articleBody,
          videoURL: this.articleAdd.videoURL,
        })
        this.getArticleList()
        this.modificationVisible = false
        this.$message.success('修改成功')
      } catch (err) {
        this.$message.error('修改失败')
      }
    },
    // 弹框表单重置
    handle() {
      this.$refs.titleRef.resetFields()
      this.titleForm = {}
    },
    // 播放视频
    openvideo(url) {
      this.videoURL = url
      this.$nextTick(() => {
        this.$refs.video.play()
      })
    },
    // 关闭视频
    closed() {
      this.$refs.video.pause()
      this.videoURL = null
    },
  },
}
</script>
<style scoped>
.container {
  margin: 10px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
}
.search {
  position: relative;
  height: 32px;
}
.el-input {
  width: 188px;
  height: 32px;
}
.text {
  font-size: 14px;
  margin-right: 10px;
  color: #606266;
  margin-left: 20px;
}
.demonstration {
  margin-left: 70px;
  margin-right: 20px;
  font-weight: 700;
  color: #606266;
}
.el-cascader {
  margin-right: 15px;
}

.el-input--medium .el-input__inner {
  width: 260px;
  padding: 0 30px 0 15px;
  height: 32px !important;
}
.rbtn {
  position: absolute;
  top: 0px;
  right: 15px;
}
.tips {
  margin: 20px 0 20px 0;
}
.cell .el-button--mini {
  font-size: 14px;
}
.el-ipt {
  width: 620px !important;
}
.previewDiv {
  margin-top: 15px;
  width: 720px;
  min-height: 80px;
  background: rgb(245, 245, 245);
}
.el-pagination {
  margin: 15px 0px;
}
.username {
  margin: 0 10px;
}

.videoDiv {
  position: fixed;
  left: 400px;
  top: 150px;
  width: 700px;
  height: 400px;
  /* z-index: 99999999; */
}
video {
  width: 100%;
  height: 100%;
}
.closed {
  position: absolute;
  top: -20px;
  left: 700px;
}
.quill-editor {
  width: 620px;
}
</style>
